GO Vault

DEPLOYMENT

5 min read

🚀 Frontend Deployment Guide

Quick Deploy Steps

✅ Prerequisites

  • Backend already deployed and running
  • Backend URL ready (e.g., https://your-backend.workers.dev)
  • Cloudflare account

✅ Step 1: Configure Backend URL

Edit index.html line ~200:

// Replace with your actual backend URL
const BACKEND_URL = "https://your-actual-backend-url.workers.dev";

Or edit config.js:

BACKEND_URL: "https://your-actual-backend-url.workers.dev",

✅ Step 2: Deploy to Cloudflare Pages

Method 1: Direct Upload (Fastest)

  1. Go to Cloudflare Dashboard → Pages
  2. Click “Create a project”
  3. Select “Upload assets”
  4. Drag and drop this entire folder
  5. Set project name: prophetic-intelligence-dashboard
  6. Click “Deploy site”
  7. Done! Your URL will be https://prophetic-intelligence-dashboard.pages.dev

Method 2: GitHub Integration

  1. Go to Cloudflare Dashboard → Pages
  2. Click “Create a project”
  3. Select “Connect to Git”
  4. Choose this repository: Prophetic-Intelligence-Platform-Frontend
  5. Build settings: Leave default (static site)
  6. Click “Begin setup”
  7. Deploy!

✅ Step 3: Test Deployment

  1. Visit your Pages URL
  2. Check feed categories load (not stuck on “Loading…“)
  3. Verify live stream shows articles
  4. Test backend button opens backend dashboard
  5. Try manual ingestion button

Ring 2 — Canonical Grounding

Ring 3 — Framework Connections

🔧 Advanced Configuration

Custom Domain Setup

  1. In Cloudflare Pages → Your Site → Custom domains
  2. Add domain: dashboard.yoursite.com
  3. Add DNS record in Cloudflare DNS: 
    Type: CNAME
Name: dashboard
Content: prophetic-intelligence-dashboard.pages.dev

Environment-Specific Configuration

Create different versions for dev/staging/production:

config.dev.js:

const CONFIG = {
    BACKEND_URL: "https://dev-backend.workers.dev",
    LIVE_FEED_REFRESH: 5000,  // Faster refresh for dev
    // ... other dev settings
};

config.prod.js:

const CONFIG = {
    BACKEND_URL: "https://prod-backend.workers.dev",
    LIVE_FEED_REFRESH: 15000,
    // ... production settings
};

Build Process (Optional)

For advanced users wanting build optimization:

# Install build tools
npm init -y
npm install --save-dev parcel-bundler
 
# Add to package.json
{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url ./"
  }
}
 
# Build for production
npm run build
 
# Deploy the dist/ folder instead

🎯 Configuration Options

Refresh Intervals

// In config.js or index.html
const CONFIG = {
    LIVE_FEED_REFRESH: 15000,    // Live articles (15 sec)
    DASHBOARD_REFRESH: 300000,   // Full dashboard (5 min)
};

Article Display

// Maximum articles in live stream
MAX_LIVE_ARTICLES: 10,
 
// Score thresholds for color coding
SCORE_THRESHOLDS: {
    HIGH: 8.0,     // Red - Critical alerts
    MEDIUM: 6.0,   // Orange - Significant
    LOW: 0.0       // Green - General watchlist
}

Custom Categories

// Add custom feed categories
CATEGORIES: {
    'breaking-news': { /* existing */ },
    'custom-category': {
        name: 'TIER 7: Custom Category',
        icon: '⭐',
        interval: 'As Needed',
        containerId: 'customCategoryFeeds'
    }
}

🐛 Troubleshooting

Common Deploy Issues

“Loading feeds…” never resolves:

// Check in browser console:
fetch('https://your-backend.workers.dev/api/feeds')
  .then(r => r.json())
  .then(console.log)
  .catch(console.error);
 
// Common fixes:
// 1. Wrong backend URL in config
// 2. Backend not deployed
// 3. CORS issues (should be handled by backend)

Stats showing all zeros:

  • Backend database not initialized
  • No RSS feeds added to backend
  • Backend worker not processing articles

Live stream empty:

  • No articles scoring ≥ 5.0
  • RSS feeds not being processed
  • Trigger manual ingestion from dashboard

Debug Commands

// Test backend connection
fetch(CONFIG.BACKEND_URL + '/api/stats')
  .then(r => r.json())
  .then(data => console.log('Backend stats:', data));
 
// Test article loading
fetch(CONFIG.BACKEND_URL + '/api/articles/recent?limit=5')
  .then(r => r.json())
  .then(articles => console.log('Recent articles:', articles));
 
// Test feed loading
fetch(CONFIG.BACKEND_URL + '/api/feeds')
  .then(r => r.json())
  .then(feeds => console.log('All feeds:', feeds));

Performance Issues

Dashboard loads slowly:

  • Reduce MAX_LIVE_ARTICLES to 5
  • Increase LIVE_FEED_REFRESH to 30 seconds
  • Use browser dev tools → Network tab to identify slow requests

High data usage:

  • Increase refresh intervals
  • Reduce number of displayed articles
  • Consider pagination for large datasets

📊 Monitoring & Analytics

Cloudflare Analytics

  1. Go to Cloudflare Pages → Your Site → Analytics
  2. Monitor: Page views, unique visitors, bandwidth
  3. Set up alerts for downtime or errors

Custom Analytics

Add to index.html before </head>:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>
 
<!-- Or Simple Analytics -->
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

Error Tracking

// Add to index.html
window.addEventListener('error', function(e) {
    console.error('Frontend error:', e.error);
    // Send to your error tracking service
    fetch('/api/log-error', {
        method: 'POST',
        body: JSON.stringify({
            message: e.message,
            filename: e.filename,
            lineno: e.lineno,
            timestamp: new Date().toISOString()
        })
    });
});

🔐 Security Considerations

HTTPS Only

  • Cloudflare Pages automatically provides HTTPS
  • Ensure backend URLs use HTTPS
  • Mixed content warnings will break functionality

Content Security Policy (Optional)

Add to index.html <head>:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self'; 
    script-src 'self' 'unsafe-inline'; 
    style-src 'self' 'unsafe-inline'; 
    connect-src 'self' https://*.workers.dev;
    img-src 'self' data:;
">

API Key Protection

  • Never put API keys in frontend code
  • All authentication should be handled by backend
  • Frontend should only make public API calls

✅ Deployment Checklist

Pre-Deploy

  • Backend URL configured correctly
  • All file paths relative (no absolute URLs)
  • Console.log statements removed (or made conditional)
  • Error handling tested

Post-Deploy

  • Site loads without errors
  • All feed categories populate
  • Live stream shows articles
  • Stats display real numbers
  • Mobile layout works
  • Backend dashboard button works
  • Export functionality works
  • Auto-refresh toggles properly

Performance Check

  • Page loads in < 3 seconds
  • Images optimized (if any)
  • CSS/JS not bloated
  • No 404 errors in console
  • HTTPS enabled everywhere

Once all checks pass, your prophetic intelligence dashboard is live and ready! 🎉

🔄 Updates & Maintenance

Updating the Frontend

# Pull latest changes
git pull origin main
 
# Update config if needed
# Edit index.html or config.js
 
# Re-deploy
# Method 1: Drag/drop updated files to Cloudflare Pages
# Method 2: Git push (if using GitHub integration)

Regular Maintenance

Weekly:

  • Check dashboard loads properly
  • Verify live stream updates
  • Test all buttons/functions

Monthly:

  • Review Cloudflare Pages analytics
  • Check for browser console errors
  • Update any dependencies (if using build tools)

As Needed:

  • Adjust refresh intervals based on usage
  • Update styling/themes
  • Add new feed categories
  • Optimize performance

Your dashboard is now ready for 24/7 prophetic intelligence monitoring! 🎯

Canonical Hub: CANONICAL_INDEX

Graph View